<template>
  <div class="retrieveNext">
    <div class="nav">
      <van-nav-bar left-arrow border @click-left="onClickLeft">
        <template #title>
          <span class="title-bar">重置密码</span>
        </template>
      </van-nav-bar>
    </div>
    <section>
      <div class="title">
        <p>我们已发送验证码到该邮箱请注意查收</p>
        <p class="email-text">{{ email }}</p>
      </div>
      <div class="rset-form" >
        <van-form @submit="resetPassword" validate-trigger='onSubmit' label-width='50px'>
          <van-field
            v-model="random"
            type="number"
            name="random"
            label="验证码"
            placeholder="请输入收到的验证码"
            :rules="[{ required: true }]"
          >
            <template #button>
              <van-count-down auto-start format='ss' :time="time" class="time-color"  @finish="timeFinish"  v-if="visible" />
              <van-button size="small" type="primary" class="sendcode"  v-else  @click="getEmailCode" >
                发送邮箱验证码
              </van-button>
            </template>
          </van-field>
          <van-field
            v-model="passWord"
            type="passWord"
            name="passWord"
            label="密码"
            placeholder="设置新密码"
            :rules="[{ pattern:passwordTest , message:'设置新密码6-12位字符'}]"
          />
          <div class="done">
            <van-button round block type="info" :loading="loading" native-type="submit">完成</van-button>
          </div>
        </van-form>
      </div>
    </section>
  </div>
</template>

<script>
import { changePassword , Getverificationcode} from '../../api/login'
import { Toast } from 'vant';
import { reactive, toRefs, onMounted } from "@vue/composition-api";


export default {
  name: "retrieveNext",
  setup(props,{root}){

      const state = reactive({
        email: "",
        random:'',
        passWord:"",
        time: 60 * 1000,
        passwordTest:/^.{6,12}$/,
        loading:false,
        visible:true
      })
      onMounted(()=>{
          state.email = root.$route.query.email;
      })
      const onClickLeft= ()=> {
        root.$router.go(-1);
      }
      // 修改密码
      const resetPassword = async(params)=>{
        params.email = state.email
        state.loading = true
        let res = await changePassword(params)
        if(res.success){
          state.loading = false
          Toast.success('密码修改成功,请重新登录');
          root.$router.push({ name:"login" })
        }else{
          state.loading = false
          Toast.success(res.msg || '密码修改失败');
        }
      }
      // 倒计时结束
      const timeFinish = ()=>{
       state.visible = false
      }
      // 再次发送验证码
      async function getEmailCode (e){
        e.preventDefault()
        let res = await Getverificationcode(state.email)
        if(res.success){
          Toast.success('验证码发送成功');
          state.visible = true
        }
      }

      return{
        ...toRefs(state),
        onClickLeft,
        resetPassword,
        timeFinish,
        getEmailCode
      }
  }
};
</script>

<style lang="less" scoped>
.retrieveNext {
  p {
    margin: 10rem/75 0;
  }
  .title {
    font-size: 30rem /75;
    margin-top: 100rem / 75;
    padding: 0 0.26667rem;
    text-align: center;
    color: rgb(51, 51, 51);
    .email-text {
      font-weight: 400;
      color: #333;
    }
  }
  .rset-form{
    margin-top: 100rem / 75;
  }
  .done{
    margin: 0 30rem / 75;
    margin-top: 40rem / 75;
  }
  .time-color{
   color: #1989fa;
  }
}

</style>